<template>
  <view
    v-if="isDisplay"
    class="top_navigation_bar_box"
    :class="{ fixed: props.isFixed }"
    :style="{
      paddingTop: `${capsule?.top}px`,
      width: `calc(100vw - ${capsule?.width + 20}px)`,
      backgroundColor: backColor,
      height: `${capsule?.height}px`,
    }"
  >
    <!-- 左侧展示 -->
    <slot name="left">
      <view class="left"> 左侧内容 </view>
    </slot>

    <!-- 中间展示 -->
    <slot name="middle">
      <view class="middle"> 中间内容 </view>
    </slot>

    <!-- 右侧其他功能展示 -->
    <slot name="right">
      <view class="right"> 右侧内容 </view>
    </slot>
  </view>
</template>

<!-- 自定义顶部导航栏 -->
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { Capsule } from '@/config/data/data'

/**
 * 接受父组件传递的值
 * @param {type} isSearch 是否显示搜索框
 * @param {type} isScrollColor 是否开启滚动变色
 * @param {type} rollDistance 当前页面竖向滚动的距离
 **/
const props = defineProps({
  /**
   * 是否开启固定定位模式,默认true false  粘性模式
   */
  isFixed: {
    type: Boolean,
    default: true,
  },
  /**
   * 背景颜色
   */
  backColor: {
    type: String,
    default: '#fff',
  },
})

//是否显示tabbar
const isDisplay = ref(false)

//胶囊信息
const capsule = ref<Capsule>({
  bottom: 0,
  height: 30,
  left: 0,
  right: 0,
  top: 0,
  width: 0,
})

// //获取胶囊信息
const getCapsuleInformation = () => {
  /*  #ifdef MP-WEIXIN */
  let menu = uni.getMenuButtonBoundingClientRect()
  if (menu) {
    capsule.value = menu as unknown as Capsule
  }
  /* #endif */

  /* #ifdef APP-PLUS */
  uni.getSystemInfo({
    success: (res) => {
      if (res.statusBarHeight) {
        capsule.value.top = res.statusBarHeight
      }
    },
  })
  /* #endif */
}

//页面加载
onMounted(() => {
  getCapsuleInformation()
  setTimeout(() => {
    isDisplay.value = true
  }, 500)
})
</script>

<style scoped lang="scss">
.fixed {
  position: fixed !important;
}
.top_navigation_bar_box {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100vw - 40rpx);
  padding: 0 20rpx 20rpx;
  height: 60rpx;
  z-index: 99;
  color: rgb(41, 36, 36);
  transition: all 0.2s;
}
</style>
